<template>
  <!-- #ifndef MP-TOUTIAO -->
  <back-nav-bar title="登录"></back-nav-bar>
  <!-- #endif -->
  <view class="login-container">
    <uni-forms ref="form" :model="formData" :rules="rules" class="login-form">
      <uni-forms-item label="账号" name="username" class="uni-forms-item">
        <uni-easyinput
          type="text"
          v-model="formData.username"
          placeholder="请输入账号"
          class="input-field"
        />
      </uni-forms-item>
      <uni-forms-item label="密码" name="password" class="uni-forms-item">
        <uni-easyinput
          type="password"
          v-model="formData.password"
          placeholder="请输入密码"
          class="input-field"
        />
      </uni-forms-item>
      <uni-forms-item label="验证码" name="code" v-if="captchaEnabled" style="margin-bottom: 50rpx">
        <view class="code-input">
          <uni-easyinput
            type="text"
            v-model="formData.code"
            placeholder="请输入验证码"
            class="input-field"
            style="width: 63%"
          />
          <image :src="codeUrl" @click="getCode" class="login-code-img" />
        </view>
      </uni-forms-item>
    </uni-forms>
    <button @click="submit" class="login-button">登录</button>
    <button @click="gotoRegister" class="register-button">注册</button>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getCodeImg } from '@/api/auth'
import { gotoRegister, toast } from '@/utils/common'
import useUserStore from '@/store/modules/user'
import BackNavBar from '@/components/back-nav-bar/back-nav-bar.vue'

const userStore = useUserStore()
const formData = reactive({
  username: 'xiefan',
  password: '123456',
  code: '',
  uuid: '',
})

const rules = reactive({
  username: {
    rules: [
      {
        required: true,
        errorMessage: '请输入账号',
      },
    ],
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: '请输入密码',
      },
    ],
  },
  code: {
    rules: [
      {
        required: true,
        errorMessage: '请输入验证码',
      },
    ],
  },
})

const codeUrl = ref('')
const captchaEnabled = ref(true)
const loading = ref(false)

const form = ref(null)

const getCode = async () => {
  try {
    const res = await getCodeImg()
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = `data:image/gif;base64,${res.img}`
      formData.uuid = res.uuid
    }
  } catch (error) {
    console.error('获取验证码失败', error)
  }
}

const submit = async () => {
  loading.value = true
  uni.showLoading({
    title: '登录中...',
  })

  try {
    await form.value.validate().then(() => {
      userStore.login(formData)
    })
  } catch (err) {
    toast(err)
    if (captchaEnabled.value) {
      getCode()
    }
  } finally {
    loading.value = false
    uni.hideLoading()
  }
}

getCode()
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20rpx;
}

.login-form {
  width: 100%;
  max-width: 360px;
}

.uni-forms-item {
  margin-bottom: 20rpx;
}

.input-field {
  width: 100%;
  padding: 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.uni-forms-item .title {
  font-weight: bold;
}

.code-input {
  display: flex;
  align-items: center;
}

.login-code-img {
  cursor: pointer;
  vertical-align: middle;
  height: 40px;
  width: 120px;
  padding-left: 12px;
  border-radius: 8rpx;
}

.login-button {
  width: 100%;
  max-width: 360px;
  padding: 12rpx 0;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #40a9ff;
}

.register-button {
  width: 100%;
  max-width: 360px;
  padding: 12rpx 0;
  background-color: #00c853; /* 绿色背景 */
  color: white;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10rpx; /* 与登录按钮之间的间距 */
}

.register-button:hover {
  background-color: #33cc66; /* 鼠标悬停时的绿色背景 */
}

.error-message {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}


</style>
